<template>
  <!-- {{ contractApprovalList }} -->
  <el-table
    @selection-change="handleSelectionChange"
    :data="contractApprovalList"
    height="530"
    style="width: 100%"
  >
    <!-- <el-table-column type="selection"></el-table-column> -->
    <el-table-column
      align="center"
      prop="variables.contractNumber"
      label="合同编号"
      width="150"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="variables.landlordName"
      label="出租方"
      width="150"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="variables.landlordPhone"
      width="130"
      label="联系方式"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="variables.landlordAddress"
      label="地区"
      width="150"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="variables.houseLocation"
      width="150"
      label="详细地址"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="variables.publicFacilities"
      width="170"
      label="基础设施"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="variables.energyFacilities"
      width="170"
      label="能源设施"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="variables.houseStructure"
      label="房间结构"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="variables.houseArea"
      label="面积"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="variables.monthlyRent"
      label="月租金"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="variables.pdf"
      label="合同地址"
      width="200"
    ></el-table-column>
    <el-table-column align="center" fixed="right" label="操作" width="150">
      <template #default="scope" align="center">
        <el-button
          :disabled="approvalBtn"
          type="success"
          @click="accord(scope.row)"
          icon="el-icon-success"
          size="small"
          title="通过"
        ></el-button>
        <el-button
          :disabled="approvalBtn"
          type="danger"
          @click="refuse(scope.row)"
          icon="el-icon-error"
          size="small"
          title="拒绝"
        ></el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import { contractApproval, complete } from '@/api/contract'
import { ElMessageBox, ElMessage } from 'element-plus'
var contractApprovalList = ref([])
var approvalBtn = ref(false)
onMounted(async () => {
  contractApprovalList.value = (await contractApproval()).data
})
var taskDto = reactive({
  taskId: '',
  approval: false,
})
var result = ref(false)
async function accord(row) {
  taskDto.taskId = row.taskId
  taskDto.approval = true
  ElMessageBox.confirm(
    '确定要通过' + row.variables.contractNumber + '的审核吗？',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    approvalBtn.value = true
    ElMessage.success('操作已提交，后续结果将通过邮件方法发送')
    result.value = (await complete(JSON.stringify(taskDto))).data
    // console.log(result.value);
    if (result.value) {
      ElMessage({
        type: 'success',
        message: '审核成功',
      })
      location.reload()
    } else {
      ElMessage({
        type: 'error',
        message: '审核失败',
        duration: 500,
        onClose: () => {
          location.reload()
        },
      })
    }
  })
}
async function refuse(row) {
  taskDto.taskId = row.taskId
  taskDto.approval = false
  ElMessageBox.confirm(
    '确定要驳回' + row.variables.contractNumber + '的申请吗？',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    approvalBtn.value = true
    result.value = (await complete(JSON.stringify(taskDto))).data
    // console.log(result.value);
    if (result.value) {
      ElMessage({
        type: 'success',
        message: '操作成功',
      })
      location.reload()
    } else {
      ElMessage({
        type: 'error',
        message: '操作失败',
        duration: 500,
        onClose: () => {
          location.reload()
        },
      })
    }
  })
}
</script>
